<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
    </div>
</body>
</html>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        // el:'#app',
        // template:"<i>666</i>",
        data:{
            name:"珠峰",
            age:11
        },
        beforeCreate() {
          //第一个钩子函数  一般使用在三方插件中
          // 这个函数中 我们是不能调用到 this中的属性的
          console.log(this.name)
        },
        created() {
          // 他是第一个能够调到 this属性的方法
          // 可以做一些ajax的请求
          console.log(this.name)
          this.timer = setInterval(() => {
            console.log(111)
          }, 1000);
        },
        beforeMount() {
          
        },
        mounted() {
          // DOM 渲染完成； ； 这里可以做一些跟DOM相关的操作 像地图使用或者echarts使用等
        },

        // 当能够触发DOM更新的数据更改的时候 才会执行这两个函数
        // 不要再更新函数中编写能够触发视图更新的哪些操作， 写出来就是死循环
        beforeUpdate() {
          console.log('update')
        },
        updated() {
          // DOM 更新完成
          // this.name = Math.random()
        },

        // 销毁的钩子函数  一般用来清除定时器或者原生事件绑定
        // $destory  只是切断了 数据层跟视图层的联系（MVVM不好使了）
        beforeDestroy() {
          clearInterval(this.timer)
        },
        destroyed() {
          
        },
    }).$mount('#app');
</script>